<template>
  <info-card :name="model.jobName" show-btns show-state>
    <template slot="btns">
      <el-button v-if="!editable" icon="el-icon-edit" size="mini" type="text" @click="handleEdit">编辑</el-button>
      <el-button v-if="editable" icon="el-icon-circle-check" size="mini" type="text" @click="handleSubmit">保存
      </el-button>
      <el-button v-if="editable" icon="el-icon-circle-close" size="mini" type="text" @click="handleCancel">取消
      </el-button>
    </template>
    <dict-tag slot="state" :options="localDict.quartz_status" :value="model.status"/>
    <section slot="content" class="section">
      <el-form v-if="editable" ref="form" :model="formdata" :rules="formrules" label-suffix="：" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="jobName">
              <el-input v-model="formdata.jobName" placeholder="请输入任务名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务分组" prop="jobGroup">
              <el-select v-model="formdata.jobGroup" placeholder="请选择任务分组" style="width: 100%;">
                <el-option v-for="(item,index) in localDict.quartz_group" :key="index" :label="item.label"
                           :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="invokeTarget">
              <span slot="label">
                调用方法
                <el-tooltip placement="top">
                  <div slot="content">
                    Bean调用示例：ryTask.ryParams('ry')
                    <br/>Class类调用示例：task.cn.hb.software.module.quartz.RyTask.ryParams('ry')
                    <br/>参数说明：支持字符串，布尔类型，长整型，浮点型，整型
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input v-model="formdata.invokeTarget" placeholder="请输入调用目标字符串"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="cron表达式" prop="cronExpression">
              <el-input v-model="formdata.cronExpression" placeholder="请输入cron执行表达式">
                <template slot="append">
                  <el-button type="primary" @click="cronable = true">
                    生成表达式<i class="el-icon-time el-icon--right"></i>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行策略" prop="misfirePolicy">
              <el-radio-group v-model="formdata.misfirePolicy" size="small">
                <el-radio-button v-for="(item,index) in localDict.quartz_strategy" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否并发" prop="concurrent">
              <el-radio-group v-model="formdata.concurrent" size="small">
                <el-radio-button label="true">允许</el-radio-button>
                <el-radio-button label="false">禁止</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="formdata.status">
                <el-radio-button v-for="item in localDict.quartz_status" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="任务说明">
          <el-input v-model="formdata.remark" placeholder="请输入任务描述" type="textarea"/>
        </el-form-item>
      </el-form>
      <el-descriptions v-else v-loading="loading" :class="['description', 'full']" :column="2"
                       contentClassName="content" labelClassName="label">
        <el-descriptions-item label="任务分组">
          <dict-tag :options="localDict.quartz_group" :value="model.jobGroup" show-label/>
        </el-descriptions-item>
        <el-descriptions-item label="执行策略">
          <dict-tag :options="localDict.quartz_strategy" :value="model.misfirePolicy" show-label/>
        </el-descriptions-item>
        <el-descriptions-item label="调用方法">{{ model.invokeTarget }}</el-descriptions-item>
        <el-descriptions-item label="是否并发">
          <el-tag :type="model.concurrent ? 'success' : 'danger'" effect="dark">
            {{ model.concurrent ? '允许并发' : '禁止并发' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="cron表达式">{{ model.cronExpression }}</el-descriptions-item>
        <el-descriptions-item label="下次执行时间">{{ model.nextValidTime }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="任务说明">{{ model.remark }}</el-descriptions-item>
      </el-descriptions>
    </section>
    <el-dialog :show-footer="false" :visible.sync="cronable" title="crontab" width="600px">
      <crontab :expression="formdata.cronExpression" @fill="crontabFill" @hide="cronable=false"/>
    </el-dialog>
  </info-card>
</template>

<script>

import {getOne, save} from "@/api/base";
import Crontab from "@/components/Crontab/index.vue";

export default {
  name: "JobDetailCard",
  components: {Crontab},
  props: {
    id: String
  },
  data() {
    return {
      model: {},
      baseUrl: '/monitor/job/',
      commonUrl: '/api/quartz/static',
      loading: false,
      editable: false,
      cronable: false,
      localDict: {
        quartz_group: [],
        quartz_result: [],
        quartz_status: [],
        quartz_strategy: [],
      },
      formdata: {},
      formrules: {
        jobName: [
          {required: true, message: "任务名称不能为空", trigger: "blur"}
        ],
        invokeTarget: [
          {required: true, message: "调用目标字符串不能为空", trigger: "blur"}
        ],
        cronExpression: [
          {required: true, message: "cron执行表达式不能为空", trigger: "blur"}
        ]
      }
    }
  },
  created() {
    this.getLocalDict()
    this.getModel()
  },
  methods: {
    getLocalDict() {
      this.getStaticData('system-quartz-group').then(res => {
        this.localDict.quartz_group = res.data
      })
      this.getStaticData('system-quartz-status').then(res => {
        this.localDict.quartz_status = res.data
      })
      this.getStaticData('system-quartz-result').then(res => {
        this.localDict.quartz_result = res.data
      })
      this.getStaticData('system-quartz-strategy').then(res => {
        this.localDict.quartz_strategy = res.data
      })
    },
    getModel() {
      this.loading = true
      getOne(this.baseUrl, this.id).then(res => {
        this.model = res.data
        this.loading = false
      })
    },
    handleEdit() {
      this.editable = true
      this.formdata = {...this.model}
    },
    crontabFill(value) {
      this.formdata.cronExpression = value;
    },
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          save(this.baseUrl, this.formdata).then(res => {
            this.$modal.msgSuccess("保存成功");
            this.getModel()
            this.handleCancel()
          })
        }
      });
    },
    // 取消按钮
    handleCancel() {
      this.editable = false;
      this.resetForm('form')
    },
  }
}
</script>

<style scoped>

</style>
